<template>
<div id="cityList">
  <div class="wrapper" ref="wrap">
    <div class="content">
      <div  v-if="cityList!=''">
          <h4>当前城市</h4>
          <div class="now">
            <span>{{$store.state.currentCity}}</span>
          </div>
          <h4>热门城市</h4>
          <div class="hot">
            <span v-for="item in hotCity" :key="item.id"  @click="selectCity">{{item.name}}</span>
          </div>
          <div v-for="item,key in cityList">
            <h4 :ref="key">{{key}}</h4>
            <ul class="content">
              <li v-for="option in item" @click="selectCity">{{option.name}}</li>
            </ul>
          </div>
      </div>
      <ul v-if="searchList!=''">
        <li v-for="item in searchList" @click="selectCity">{{item.name}}</li>
      </ul>
    </div>
  </div>
   <ul class="letter">
      <li v-for="item,key in cityList" :key="key" @click="changeLetter">{{key}}</li>
  </ul>
</div>
 </template>

<script>
import Bscroll from 'better-scroll'
export default {
  props:["cityList","hotCity","searchList"],
  data(){
    return {
      iHeight:0
    }
  },
  methods:{
    //获取当前可视区的高度
    getHeight(){
      if( this.$refs.wrap){
      this.iHeight = document.documentElement.clientHeight;
      this.$refs.wrap.style.height = this.iHeight+"px"
      }
    },
    changeLetter(e){
      let letter = e.target.innerText
      this.scroll.scrollToElement(this.$refs[letter][0])
    },
    selectCity(e){
      this.$store.state.currentCity = e.target.innerText
      this.$router.push("/")
    }
  },
 mounted(){
    this.getHeight()
    this.$nextTick(() => {
    this.scroll = new Bscroll(this.$refs.wrap,{
        click:true
      });
    });
  },
  created(){
    window.onresize =()=>{
      this.getHeight()
    }
  }
}
</script>

<style lang="less" scoped>
#cityList{
  position: absolute;
  top: 80/16rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  h4{
    background: #eee;
    font-size: 13/16rem;
    line-height: 22/16rem;
    color: #666;
    text-indent: 1rem
    } 
  li{
    border-bottom: 1/16rem solid #eee;
    line-height: 38/16rem;
    text-indent: 1rem
  }
  .wrapper{
    h4{
    background: #eee;
    font-size: 13/16rem;
    line-height: 22/16rem;
    color: #666;
    text-indent: 1rem
  }
    .now{
      padding: 10/16rem 10/16rem;
      span{
        display: block;
        width: 60/16rem;
        text-align: center;
        border:1px solid #ccc;
        padding: 5/16rem;
        font-size: 12/16rem;
        border-radius: 3/16rem
      }
    }
    .hot{
      margin-left: 10/16rem;
      margin-top:10/16rem;
      span{
        width: 30%;
        display: inline-block;
        text-align: center;
        border:1px solid #ccc;
        padding: 5/16rem;
        font-size: 12/16rem;
        border-radius: 3/16rem;
        box-sizing: border-box;
        margin-bottom: 5/16rem;
        margin-right: 5/16rem
      }
    }
  }
  .letter{
      position: fixed;
      right: 5/16rem;
      top:100/16rem;
      li{
        line-height: 20/16rem;
        border:none;
        text-align: center;
        color:#00bcd4;
        font-size:14/16rem
      }
    }
}


</style>